<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link type="text/css" rel="stylesheet" href="../css/mui.min.css" />
		<link type="text/css" rel="stylesheet" href="../css/advanced.search.css" />
		<style type="text/css">
			.test {
				width: 100%;
				color: #FF0000;
				font-size: 16px;
				line-height: 30px;
				text-align: center;
			}
			.brf {
				top: 0;
				left: 0;
				color: red;
				z-index: 999;
				position: fixed;
				max-width: 100%;
				font-size: 13px;
				padding: 6px 10px;
				background: rgba(100, 100, 100, .2);
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="background: #ffffff; box-shadow: none;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">测试scroll</h1>
		</header>
		
		<nav class="mui-bar mui-bar-tab no-border">
			<button id="collectBtn" type="button" class="mui-btn mui-btn-primary mui-btn-outlined">
				<span class="mui-icon mui-icon-star"></span> 要收藏吗
			</button>
		</nav>
		
		<!-- 搜索框 -->
		<div class="mui-input-row advanced-search content-search-box">
		    <span class="mui-icon mui-icon-search"></span>
		    <input id="searchInput" type="text" class="mui-input-clear" placeholder="请输入您要查询的关键字">
			<a href="#picture" class="mui-icon mui-icon-camera" style="display: inline-block;"></a>
			<span class="mui-icon mui-icon-mic" onclick="startaptureAudio()"></span>
		</div>
		
		<div class="mui-content mui-scroll-wrapper outer">
			<div class="mui-scroll">
				<div id="outerTopBox" class="outer-box test" style="border: solid 1px #0000ff;">
					<div>3123123132</div>
					<div>3123123132</div>
					<div>3123123132</div>
					<div>3123123132</div>
					<div>3123123132</div>
					<div>3123123132</div>
					<div>3123123132</div>
				</div>
				<div id="slider" class="mui-slider">
					<div id="sliderSegmentedControl" class="">
						<div id="searchSlider" class="mui-scroll"></div>
					</div>
					<div id="searchSliderGroup" class="mui-slider-group"></div>
				</div>
			</div>
		</div>
		<div class="brf">
			<div id="outerY"></div>
			<div id="innerY"></div>
		</div>
	</body>
	
	<script type="text/javascript" src="../js/mui.min.js"></script>
	<script type="text/javascript" src="../js/mui.pullToRefresh.js"></script>
	<script type="text/javascript" src="../js/mui.pullToRefresh.material.js"></script>
	<script type="text/javascript" src="../js/nest.scroll.tab.pullToRefresh.js"></script>
	
	<script type="text/javascript">
		mui.init();
		var nums = [];
		
		// 动态渲染标签页标签数据
		setTimeout(function(){
			var h1 = '', h2 = '';
			for (var i = 0; i < 9; i++) {
				if (i == 0) {
					h1 += '<a id="tab' + i + '" class="mui-control-item mui-active" href="#c' + i + '">tab' + i + '</a>';
					h2 += '<div id="c' + i + '" class="mui-slider-item mui-control-content mui-scroll-wrapper inner mui-active">\
							<div id="cScroll' + i + '" class="mui-scroll" init="true" total="0" page-no="0" page-size="10">\
								<div class="list-box">';
					for (var j = 0; j < i + 3; j++) {
						h2 += '<div class="test test2">' + i + '-' + j + '</div>';
					}
					h2 += '</div></div></div>';
				} else {
					h1 += '<a id="tab' + i + '" class="mui-control-item" href="#c' + i + '">tab' + i + '</a>';
					h2 += '<div id="c' + i + '" class="mui-slider-item mui-control-content mui-scroll-wrapper inner">\
							<div id="cScroll' + i + '" class="mui-scroll" init="true" total="0" page-no="0" page-size="10">\
								<div class="list-box">';
					for (var j = 0; j < i + 3; j++) {
						h2 += '<div class="test test2">' + i + '-' + j + '</div>';
					}
					h2 += '</div></div></div>';
				}
				nums.push({num: 0});
			}
			document.querySelector('#searchSlider').innerHTML = h1;
			document.querySelector('#searchSliderGroup').innerHTML = h2;
			
			// 注意：对于动态渲染的slider标签页务必要执行以下三个方法，否则标签页将无法正常使用，尤其是标签超过屏幕宽度时
			/*1*/
			document.querySelector('#sliderSegmentedControl').className = 'mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted';
			/*2*/
			mui(".mui-scroll-wrapper.mui-slider-indicator").scroll();
			/*3*/
			var slider = mui('.mui-slider').slider();
				
			// 初始化内外部滚动 和 上拉加载
			initScrollAndPullToRefresh();
				
			// 标签页监听
			document.getElementById('slider').addEventListener('slide', function(e) {
				// activeSlide 当前活跃的标签页的索引值
				activeSlide = e.detail.slideNumber;
				console.log('activeSlide -> ' + activeSlide);
				// 刷新当前活跃标签页的嵌套滚动和上拉加载的监听
				refreshSlideScrollAndPullUp();
			});
			loadData();
		}, 1000);
		
		// 上拉加载回调
		function loadData() {
			console.log('loadData start -> ');
			// 获取当前活跃的标签页 中 mui-scroll 所在的dom元素 也是 上拉加载 所监听的元素所在
			var activeScroll = getActiveSlideScroll();
			// 模拟数据加载  可使用ajax等方法替换
			setTimeout(function() {
				console.log('loadData start render -> ');
				for (var i = 0; i < 10; i++) {
					var div = document.createElement('div');
					div.innerHTML = '第 ' + activeSlide + ' 标签页，第 ' + nums[activeSlide].num + '-' + i + '个div!!!';
					activeScroll.querySelector('.list-box').appendChild(div);
				}
				nums[activeSlide].num++;
				console.log('nums[' + activeSlide + '].num -> ' + nums[activeSlide].num);
				// 继续 或 结束上拉加载 第二个参数 false：可以继续上拉加载  true：结束上拉加载
				endPullUpToRefresh(activeScroll, nums[activeSlide].num > 2);
			}, 1500);
		}
	</script>
</html>